<template>
  <div class="content">
    <el-card>
      <div style="display:flex;justify-content: center;align-items: center;" @click="toWelcome">
        <img src="../../assets/logo.png" alt="logo" width="45%" height="45%"/>
      </div>
      <div align="center" style="padding:10px 0">
        <span>欢迎使用EvinChan在线协同编辑图片系统</span>
      </div>
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
        <el-form-item prop="uername">
          <el-input placeholder="请输入您的平台登录账号" v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
        </el-form-item>
        <el-form-item prop="value" >
          <el-select placeholder="请选择角色" v-model="loginForm.value">
            <el-option label="客户" value="1"></el-option>
            <el-option label="员工" value="2"></el-option>
            <el-option label="管理员" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button :disabled="isClick" type="primary" @click="login">登录</el-button>
      <!-- <hr /> -->
      <el-divider></el-divider>
      <el-checkbox v-model="checked" size="mini" @change="loginAllow"
        >已阅读并同意</el-checkbox
      >
      <el-link href="#" :type="isSuccess"
        >《EvinChan在线协同编辑图片系统协议》</el-link
      >
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: false,
      isClick: false,
      isSuccess: 'info',
      // 这是登录表单的数据绑定对象
      loginForm: {
        // username: '陈俊铭',
        // password: '123456',
        username: '',
        password: '',
        value: ''
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      },
      userData: []
    }
  },
  created() {
    this.loginAllow()
  },
  methods: {
    // 跳转到主页
    toWelcome() {
      this.$routr.push('/welcome')
    },
    // 允许登陆的函数
    loginAllow() {
      if (this.checked === false) {
        this.isClick = true
        this.isSuccess = 'success'
        // console.log(this.isSuccess)
      } else {
        this.isClick = false
        this.isSuccess = 'info'
      }
    },
    // 登陆提交
    login() {
      // console.log(this.loginForm)
      if (this.loginForm.value === '') {
        this.$message.error('登陆编码/密码/角色为空，无法登陆')
        return
      }
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
        //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
        //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        window.sessionStorage.setItem('token', res.data.token)
        // 将用户名存入seessionStorage
        window.sessionStorage.setItem('username', res.data.username)

        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        if (this.loginForm.value === '1') {
          // this.loading = true
          const { data: resuser } = await this.$http.get('users', {
            params: { query: window.sessionStorage.getItem('username'),
              // 当前的页数
              pagenum: 1,
              // 当前每页显示多少条数据
              pagesize: 10 }
          })
          // console.log(resuser, '=======resuser')
          if (resuser.meta.status !== 200) {
            return this.$message.error('获取用户信息失败')
          }
          this.userData = resuser.data.users
          // console.log(this.userData, '======userdata')
          if (this.userData[0].role_name === '客户' || this.userData[0].role_name === '老板') {
            this.$message.success(res.meta.msg)
            this.$router.push('/welcome')
          } else {
            return this.$message.error('无权限登陆，停止操作！')
          }
        } else if (this.loginForm.value === '2') {
          const { data: resuser } = await this.$http.get('users', {
            params: { query: window.sessionStorage.getItem('username'),
              // 当前的页数
              pagenum: 1,
              // 当前每页显示多少条数据
              pagesize: 10 }
          })
          // console.log(resuser, '=======resuser')
          if (res.meta.status !== 200) {
            return this.$message.error('获取用户信息失败')
          }
          this.userData = resuser.data.users
          // console.log(this.userData, '======userdata')
          if (this.userData[0].role_name !== '客户') {
            this.$message.success(res.meta.msg)
            this.$router.push('/welcome')
          } else {
            return this.$message.error('无权限登陆，停止操作！')
          }
          // this.$router.push('/worker')
        } else if (this.loginForm.value === '3') {
          const { data: resuser } = await this.$http.get('users', {
            params: { query: window.sessionStorage.getItem('username'),
              // 当前的页数
              pagenum: 1,
              // 当前每页显示多少条数据
              pagesize: 10 }
          })
          // console.log(resuser, '=======resuser')
          if (res.meta.status !== 200) {
            return this.$message.error('获取用户信息失败')
          }
          this.userData = resuser.data.users
          // console.log(this.userData, '======userdata')
          if (this.userData[0].role_name === '照片审核主管' || this.userData[0].role_name === '行政助理' || this.userData[0].role_name === '市场经理' || this.userData[0].role_name === '总经理' || this.userData[0].role_name === '人事经理' || this.userData[0].role_name === '超级管理员' || this.userData[0].role_name === '老板' || this.userData[0].role_name === 'CFO') {
            this.$message.success(res.meta.msg)
            this.$router.push('/welcome')
          } else {
            return this.$message.error('无权限登陆，停止操作！')
          }
          // this.$router.push('/backstage')
        } else {
          this.$message.error('请选择正确的登陆对象')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-card {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    box-shadow: none;
    .el-input {
      // border: 1px solid rgba(61, 114, 245, 1);
      // border-radius: 10px;
    }
    .el-button {
      width: 100%;
      background: rgba(61, 114, 245, 1);
      color: #fff;
    }
    .el-checkbox {
      font-size: 10px;
      color: #999;
      margin-right: 0;
    }
    a {
      font-size: 10px;
      color: #999;
    }
  }
}
</style>
